<template>
  <div class="main-box">
    <button @click="logContent">log content</button>
    <button @click="logInfo01">logInfo01</button>
    <button @click="logInfo02">logInfo02</button>
    <button @click="logInfo03">logInfo03</button>
    <button @click="logInfo04">logInfo04</button>
    <br />
    <button @click="btn01">btn01</button>
    <button @click="btn02">btn02</button>
    <button @click="btn03">btn03</button>
    <button @click="btn04">btn04</button>
    <button @click="btn05">btn05</button>
    <pdf
      ref="myPdfComponent"
      src="http://qinniu.douziqianduan.icu/oa_work02.pdf"
      class="hzs-pdf-box"
      style="
        width: 500px; 
        margin: 10px auto;
        border: 2px solid black
        position: relative;
      "
    ></pdf>
    <div class="test-point"></div>
  </div>
</template>

<script>
import pdf from "vue-pdf";

export default {
  name: "Pdf04",
  components: {
    pdf,
  },
  data() {
    return {
      // 滑动条滚动位置
      scrollTop: 0,
      // pdf盒子的位置
      pdfPosition: {},
    };
  },
  methods: {
    writeObj(obj) {
      let description = "";
      for (let i in obj) {
        let property = obj[i];
        description += i + " = " + property + "\n";
      }
      return description;
    },
    logContent() {
      this.$refs.myPdfComponent.pdf.forEachPage(function (page) {
        console.log(page.getTextContent);
        return page.getTextContent().then(function (content) {
          console.log(content);
          let text = content.items.map((item) => item.str);
          console.log(text);
        });
      });
    },
    logInfo01() {
      this.$refs.myPdfComponent.pdf.forEachPage(function (page) {
        return page.getTextContent().then(function (content) {
          content.items.map((item) => {
            console.log(item.transform);
          });
        });
      });
    },
    logInfo02() {
      console.log(this.$refs.myPdfComponent.pdf);
    },
    logInfo03() {
      console.log(this.$refs.myPdfComponent.pdf.getResolutionScale());
    },
    logInfo04() {
      // console.log(this.$refs.myPdfComponent.pdf);
      this.$refs.myPdfComponent.pdf.forEachPage((page) => {
        console.log(page);
        console.log(this.writeObj(page));
        // console.log(this.strobj(page))
      });
    },

    btn01() {
      this.scrollTop = document.documentElement.scrollTop;
      this.pdfPosition.left = this.$refs.myPdfComponent.$el.offsetLeft;
      this.pdfPosition.top = this.$refs.myPdfComponent.$el.offsetTop;
      this.pdfPosition.width = this.$refs.myPdfComponent.$el.offsetWidth;
      this.pdfPosition.height = this.$refs.myPdfComponent.$el.offsetHeight;
      console.log(this.pdfPosition);
      console.log("当前下滑的距离");
      console.log(this.scrollTop);
    },

    // 尝试画出pdf中文字的边界
    btn02() {
      this.$refs.myPdfComponent.pdf.forEachPage((page) => {
        page.getTextContent().then((content) => {
          content.items.map((item) => {
            console.log(item);
            this.createPoint(
              item.transform[4],
              item.transform[5],
              item.transform[0],
              item.transform[3]
            );
          });
        });
      });
    },
    btn03() {
      this.createPoint(20, 20);
    },
    btn04() {},
    btn05() {},

    // 在pdf canvas中点击
    pdfClick($event) {
      console.log("打印位置信息");
      let pos = $event.currentTarget.getBoundingClientRect().top;
      console.log(pos);
    },

    createPoint(left, top, width = 2, height = 2) {
      let point = document.createElement("div");
      point.className = "hzs-point";
      point.style.position = "absolute";
      point.style.left = left + "px";
      // point.style.top = top + "px";
      point.style.bottom = top + "px";
      point.style.width = width + "px";
      point.style.height = height + "px";
      point.style.background = "black";
      point.style.zIndex = "999";
      point.style.borderRadius = "50%";

      console.log(point);

      document.querySelector(".hzs-pdf-box").appendChild(point);
    },
  },
};
</script>

<style scoped>
/* .main-box {
  position: relative;
} */

.test-point {
  z-index: 999;
  position: absolute;
  width: 5px;
  height: 5px;
  background: black;
  top: 30px;
  left: 30px;
  border-radius: 50%;
}
</style>